import { Canvas } from '@react-three/fiber';
import { CineonToneMapping } from 'three';

import { Perf } from 'r3f-perf';

import CarContainer from './components/car';

function ThreeContainer() {
  return (
    <Canvas
      className="webgl"
      dpr={[1, 2]}
      camera={{ fov: 45, near: 0.1, position: [-1.5, 15, 34.8] }}
      gl={{ toneMapping: CineonToneMapping, antialias: true }}
    >
      <Perf position="top-left" />
      <CarContainer></CarContainer>
    </Canvas>
  );
}

export default ThreeContainer;
